<template>
  <div>
      <div class="header flex">
        <div class="flex" style="width: 10%" @click="extendHis">
          <img style="width: 1.25rem;height: 1.25rem" src="../../assets/img/left.png">
        </div>
        <div style="width: 80%">
          <span style="font-size: 1rem">{{title}}</span>
        </div>
        <router-link :to="'/qds/applyWithdraw'" style="width: 10%">
          <div style="color: rgb(33, 150, 243)">提现</div>
        </router-link>
      </div>
      <loading v-if="isShowLoading"></loading>
      <div class="flex_center" v-if="!isShowLoading">
        <div class="bodyContent">
          <div class="extend_top imgH" > <!--v-lazy:background-image="{src: avatarurl}"-->
            <div class="extend_top_content flex">
              <img :src="avatarurl">
              <div class="extent_personal flex flex_column flex_around">
                <p>{{mobile}}</p>
                <p>{{member.created_at}}</p>
              </div>
            </div>
          </div>
          <div class="white_bac flex flex_between extent_money">
            <div>
              <p class="font-weight">总金额</p>
              <p class="orange_p font-weight">{{member.total_money}}</p>
            </div>
            <div>
              <p class="font-weight">可提成</p>
              <p class="orange_p font-weight">{{member.able_money}}</p>
            </div>
            <div>
              <p class="font-weight">已提成</p>
              <p class="orange_p font-weight">{{member.already_money}}</p>
            </div>
            <div>
              <p class="font-weight">已冻结</p>
              <p class="orange_p font-weight">{{member.freeze_money}}</p>
            </div>
          </div>
          <mu-tabs :value.sync="active2" color="#fff" indicator-color="#2196f3" full-width class="extend_tab margin_top5">
            <mu-tab>
              <i class="fa fa-money"></i>
              推广费明细
            </mu-tab>
            <mu-tab>
              <i class="fa fa-check-square-o"></i>
              提现明细
            </mu-tab>
            <mu-tab>
              <i class="fa fa-users"></i>
              我的团队
            </mu-tab>
            <!--<router-link :to="'/qds/refer'">-->
              <mu-tab style="color: #2c3e50" @click="toRefer">
                <i class="fa fa-window-restore"></i>
                二维码推广
              </mu-tab>
            <!--</router-link>-->
          </mu-tabs>

          <mu-container ref="container" class="demo-loadmore-content" v-bind:style="{height:conH}" >
            <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" v-if="active2 === 0">
              <mu-list>
                <template v-if="commission_list != undefined && commission_list != null && commission_list != '' && commission_list.length > 0" v-for="commission in commission_list">
                  <div class="content_pad flex flex_between white_bac">
                    <div>
                      <p style='color: #2196f3'>{{commission.created_at}}</p>
                      <p class="buy_water_bill">{{commission.desc}}</p>
                    </div>
                    <div>
                      <p style="color: #FF9900">
                        <span v-if="commission.type == 1">+</span>
                        <span v-if="commission.type == 0">-</span>
                        <span>{{commission.money}}</span>
                      </p>
                    </div>
                  </div>
                  <mu-divider/>
                </template>
                <div style="margin-top: 5rem" v-if="commission_list == undefined || commission_list == null || commission_list == '' || commission_list.length <= 0">
                   您暂无推广费明细相关信息
                </div>
              </mu-list>
            </mu-load-more>
            <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" v-if="active2 === 1">
              <mu-list>
                <template v-if="withdraw_list != undefined && withdraw_list != null && withdraw_list != '' && withdraw_list.length > 0" v-for="withdraw in withdraw_list">
                  <div class="content_pad flex flex_between white_bac">
                    <div>
                      <p style='color: #2196f3;text-align: left'>{{withdraw.created_at}}</p>
                      <p class="buy_water_bill" style="color: #FF9900;text-align: left">
                        <span>{{withdraw.money}}元（{{withdraw.status_desc}}）</span>
                      </p>
                    </div>
                    <div style="color: rgb(156, 155, 155);font-size: 0.75rem">
                      <p>
                        <span v-if="withdraw.account_type == 2">支付宝</span>
                        <span v-if="withdraw.account_type == 1">微信</span>
                        <span>{{withdraw.account}}</span>
                      </p>
                      <p style="margin-top: 0.8rem" v-if="withdraw.account_type == 2" class="buy_water_bill">收款人：{{withdraw.account_name}}</p>
                    </div>
                  </div>
                  <mu-divider/>
                </template>
                <div style="margin-top: 5rem" v-if="withdraw_list == undefined || withdraw_list == null || withdraw_list == '' || withdraw_list.length <= 0">
                  您暂无提现明细相关信息
                </div>
              </mu-list>
            </mu-load-more>
            <mu-container ref="container" class="demo-loadmore-content" v-bind:style="{height:conH}" v-if="active2 === 2">
              <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                <mu-list>
                  <template v-if="referteam_list != undefined && referteam_list != null && referteam_list != '' && referteam_list.length > 0" v-for="team in referteam_list">
                    <div class="content_pad flex white_bac">
                      <img :src="team.avatarurl" style="width: 4rem;height: 4rem;border-radius: 50%;margin-right: 0.7rem">
                      <div class="flex flex_column flex_around">
                        <p class="font-weight" style="text-align: left">{{team.nickname}}</p>
                        <p style="text-align: left">{{team.created_at}}</p>
                      </div>
                    </div>
                  </template>
                  <div style="margin-top: 5rem" v-if="referteam_list == undefined || referteam_list == null || referteam_list == '' || referteam_list.length <= 0">
                    您暂无团队关信息
                  </div>
                </mu-list>
              </mu-load-more>
            </mu-container>

          </mu-container>
        </div>
      </div>
  </div>
</template>

<script>

    import Loading from "../../components/loading";

    export default {
      components: {Loading},
      name: "my-extend",
      data(){
        return{
          isShowLoading:true,
          active2:0,
          title:'我的推广',
          num:[1,2,3,4,5,6,7,8,9,1,2,3,4,5],
          text:'xxx',
          conH:'600px',
          num: 20,
          refreshing: false,
          loading: false,
          text: 'List',
          commission_list:[],
          withdraw_list:[],
          referteam_list:[],
          mid:'',
          refer_type:'',
          member:{
            total_money:0,
            able_money:0,
            already_money:0,
            freeze_money:0,
            created_at:""
          },
          mobile:'',
          avatarurl:'',
          page:1,
        }
      },
      mounted(){
        this.checkLogin();
        var login = this.getCache('login_key');
        if(this.isEmpty(login)){
          this.$toast.warning('请重新登录');
          setTimeout({
            //跳转至登录页面
          },1000)
          return;
        }
        this.mid = login.mid;
        this.refer_type = login.refer_type;
        this.mobile = login.mobile || 'tel：暂未设置';
        if(!this.isEmpty(login.avatarurl)){
          this.avatarurl = login.avatarurl;
        }
        this.$nextTick(function(){

          $('.extend_tab  .mu-tab-wrapper').css('padding','0px')
        });
        this.commissionList(1);
        this.withdrawList(1);
        this.referTeamList(1);
        this.MemberCommission();

      },
      methods:{
        initH(){
          var allh = document.documentElement.clientHeight;
          var headerH = $('.header').outerHeight(true);
          var imgH = $('.imgH').height();
          var monyH = $('.extent_money').outerHeight(true);
          var tabH = $('.extend_tab').height();
          var h = allh - headerH - imgH - monyH - tabH -12;
          this.conH = h + 'px';
        },
        extendHis(){
          this.$router.push({path:'/qds/personall'})
        },
        refresh () {
          this.refreshing = true;
          this.$refs.container.scrollTop = 0;
          if(this.active2 == 0){
            this.commissionList(1);
          }else if(this.active2 == 1){
            this.withdrawList(1);
          }else if(this.active2 == 2){
            this.referTeamList(1)
          }
          setTimeout(() => {
            this.refreshing = false;

          }, 1000)
        },
        load () {
          this.loading = true;
          if(this.active2 == 0){
            this.commissionList(this.page);
          }else if(this.active2 == 1){
            this.withdrawList(this.page);
          }else if(this.active2 == 2){
            this.referTeamList(this.page)
          }
          setTimeout(() => {
            this.loading = false;

          }, 1000)
        },
        commissionList(page){
          this.yesS.commissionList(
            this.$combineParams({mid:this.mid,page:page}
          )).then(res => {
            var objs = res.data.list.data.slice();
            if(page == 1){
              this.commission_list = objs;
            }else{
              if(!this.isEmpty(objs) && objs.length > 0){
                for (var i=0;i<objs.length;i++){
                  this.commission_list.push(objs[i]);
                }
              }
            }
            this.page = page+1;
            this.isShowLoading = false;
            if(page == 1)
            this.$nextTick(function () {
              this.initH();
            })

          })
        },
        withdrawList(page){
          this.yesS.withdrawList(
            this.$combineParams({mid:this.mid,page:page}
          )).then(res => {
            var objs = res.data.list.data.slice();
            if(page == 1){
              this.withdraw_list = objs;
            }else{
              if(!this.isEmpty(objs) && objs.length > 0){
                for (var i=0;i<objs.length;i++){
                  this.withdraw_list.push(objs[i]);
                }
              }
            }
            this.page = page+1;
          })
        },
        referTeamList(page){
          this.yesS.referTeamList(
            this.$combineParams({mid:this.mid,page:page}
          )).then(res => {
            var objs = res.data.list.data.slice();
            if(page == 1){
              this.referteam_list = objs;
            }else{
              if(!this.isEmpty(objs) && objs.length > 0){
                for (var i=0;i<objs.length;i++){
                  this.referteam_list.push(objs[i]);
                }
              }
            }
            this.page = page+1;
          })
        },
        toRefer(){
          if(this.refer_type == 2){
            this.$router.push({path:'/qds/refer',query:{mid:this.mid}});
          }else if(this.refer_type == 1){
            this.$router.push({path:'/qds/referPerson',query:{mid:this.mid}});
          }
        },
        MemberCommission(){
          this.yesS.MemberCommission(
            this.$comParams()
          ).then(res => {
            if(this.isEmpty(res.data) || res.data.length <= 0){
              return;
            }
            this.member = res.data.info;
          })
        }

      }
    }
</script>

<style scoped>
  /*@import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';*/
  @import "css/myExtend.css";
  .mu-tab-active{
    color: #2196f3!important;
  }
  .header{
    width: 100%;
    padding: 0.5rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #c3c3c3;
    background: #fff;
    position: relative;
  }
  .header img{
    width: 1.25rem;
    height: 1.25rem;
  }
</style>
